<template>
  <el-drawer
    title="回复列表"
    :visible.sync="drawer"
    direction="rtl"
  >
    <el-scrollbar style="height: 90%">
      <div v-for="(re,index) in replyList" :key="re.id">
        <el-divider v-if="0!=index" />
        <el-row v-if="'匿名用户'==re.nickName" type="flex" justify="center" align="middle" class="reply-row">
          <el-col :span="2">
            <el-badge is-dot class="item" type="primary">
              <el-avatar :src="require('@/assets/images/avatar1.png')" />
            </el-badge>
          </el-col>
          <el-col :span="20">
            <span class="name">{{ re.nickName }}</span>
            <span class="time">{{ re.createTime }}</span>
            <div class="content">
              {{ re.content }}
            </div>
          </el-col>
        </el-row>
        <el-row v-else type="flex" justify="center" align="middle" class="reply-row my-reply-row">
          <el-col :span="20">
            <span class="name">{{ re.nickName }}</span>
            <span class="time">{{ re.createTime }}</span>
            <div class="content">
              {{ re.content }}
            </div>
          </el-col>
          <el-col :span="2">
            <el-badge is-dot class="item" type="success">
              <el-avatar :src="require('@/assets/images/avatar1.png')" />
            </el-badge>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>

    <el-row class="mt30">
      <el-col :span="21">
        <el-input v-model="content" class="ml5" />
      </el-col>
      <el-col :span="3">
        <el-button type="primary" class="ml5" @click="saveReply">
          回复
        </el-button>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script>
import {listReplyRequest, saveReplyRequest} from "../../../api/project/data"

export default {
  name: "ReplyDrawer",
  props: {
    formKey: {
      type: String,
      default: ''
    },
    dataId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      replyList: [],
      content: '',
      drawer: false
    }
  },
  methods: {
    open() {
      this.drawer = true
      this.getReplyList()
    },
    getReplyList() {
      listReplyRequest({formKey: this.formKey, dataId: this.dataId}).then((res) => {
        this.replyList = res.data
      })
    },
    saveReply() {
      if (!this.content) {
        this.msgError('请输入回复内容')
        return
      }
      let data = {formKey: this.formKey, dataId: this.dataId, content: this.content}
      saveReplyRequest(data).then((res) => {
        this.msgSuccess('回复成功')
        this.content = ''
        this.getReplyList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.reply-row:first-child {
  margin-top: 10px;
}

.reply-row {
  font-size: 14px;

  .name {
    padding-left: 20px;
  }

  .time {
    color: #828999;
    display: inline-block;
    margin-left: 20px;
  }

  .content {
    margin-top: 10px;
    line-height: 20px;
    padding-left: 20px;
  }
}

.my-reply-row {
  text-align: right;

  .name {
    padding-right: 20px;
  }

  .time {
    margin-right: 20px;
  }

  .content {
    padding-right: 20px;
  }
}
</style>
